.menu{
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;
}
.menu li{
    /* border-bottom: 1px solid rgb(241, 241, 241); */
    position: relative;
    cursor: pointer;
}
.menu li>a{
    display: block;
    position: relative;
    color: rgb(75, 75, 75);
    padding: 16px 0px 16px 24px;
    cursor: pointer;
}
.menu li.sub-menu span{
    display: block;
    padding: 16px 0px 16px 24px;
    transition: all 0.1s;
}
.menu li.sub-menu span:hover{
    background-color: rgb(226, 244, 255);
    animation: k1 0.5s;
}
.menu li.sub-menu{
    padding: 0;
}
.menu>li.sub-menu::after{
    display: inline-block;
    position: absolute;
    right: 16px;
    width: 16px;
    height: 16px;
    top: 18px;
    content: '';
    background-image: url(/src/imgs/icon/down.png);
    background-size: 16px 16px;
    opacity: 0.6;
    pointer-events: none;
    transform: rotateZ(180deg);
    transition: all 0.2s;
}
.menu>li.sub-menu>.menu{
    overflow: hidden;
    height: 0;
    transition: all 0.3s;
}
.menu>li.sub-menu.active>.menu{
    animation: up-scale-in 0.3s;
    height: auto;
}
.menu>li.sub-menu.active::after{
    transform: rotateZ(0deg);
}
.menu-item{
    transition: all 0.3s;
}
.menu-item:hover,.menu-item.active{
    background-color: rgb(232, 241, 255);
}
.sub-menu>.menu{
    padding-left: 14px;
}

@keyframes up-scale-in {
    from{opacity: 0; transform: translateY(35px) scale(0.7);}
    to{opacity: 1;transform: translateY(0px) scale(1);}
}
@keyframes k1{
    0%{}
    50%{padding-left: 26px;}
    100%{}
}
